import React, { useEffect } from 'react'
import { Modal, Button, Descriptions } from 'antd';

function RcAddRules(props) {



    const [visible, setVisible] = React.useState(false);
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [modalData, setModalData] = React.useState({});

    // 查看按钮
    const showModal = () => {
        setVisible(true);
        console.log(props)

        // 处理数据
        const start_time = props.msg.times[0].substring(3)
        const due_time = props.msg.times[0].substring(3)
        console.log(start_time);
        setModalData(() => {
            return { ...props.msg, start_time, due_time }
        })
        
    };

    const handleOk = () => {
        // 清空内容
        setModalData({});
        // 开启 "菊花"
        setConfirmLoading(true);

        // 异步关闭面板
        setTimeout(() => {
            // 设置为 false 关闭面板
            setVisible(false);
            // 关闭 "菊花"
            setConfirmLoading(false);
        }, 2000);
    };

    // 取消按钮
    const handleCancel = () => {
        //关闭面板
        setVisible(false);
    };





    return (
        <>
            <Button type="dashed" onClick={showModal}>
                查看
            </Button>
            <Modal
                title="详情"
                width={720}
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <div>
                    <Descriptions
                        bordered
                        layout="vertical"
                        column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
                    >
                        <Descriptions.Item label="规则名称">{modalData.name}</Descriptions.Item>
                        <Descriptions.Item label="开始时间">{modalData.start_time}</Descriptions.Item>
                        <Descriptions.Item label="到期时间">{modalData.due_time}</Descriptions.Item>
                        <Descriptions.Item label="状态">{`${modalData.stateBtn ? "上线" : "下线"}`}</Descriptions.Item>
                        <Descriptions.Item label="命中次数">{modalData.hit}</Descriptions.Item>
                    </Descriptions>
                </div>
            </Modal>
        </>
    )
}

export default RcAddRules
